<template>
    <view class="page-wrap">
        <view class="box">
            <swiper class="banner" autoplay circular v-if="banners.length">
                <swiper-item :item-id="item.id" v-for="item in banners" :key="item.id" @click="handleBannerClick(item)">
                    <image :src="item.picture"></image>
                </swiper-item>
            </swiper>
            <view class="notice" v-if="notices.length">
                <u-notice-bar direction="column" :speed="100" :text="noticeTitles" mode="link"
                    bg-color="rgba(91, 141, 249, 0.1)" url="/pages/common/notice/index" />
            </view>
            <view class="service" @click="toAdd('')" v-if="appConfig.indexXypsVisible">
                <image v-if="appConfig.indexXypsUrl" :src="appConfig.indexXypsUrl"
                    :style="{height: (appConfig.indexXypsHeight||'329') + 'rpx'}"></image>
                <image class="def" v-else src="../../../static/xyps/xyps.jpg"></image>
            </view>
        </view>
        <view class="box" v-if="activities.length">
            <view class="box-title">
                <view class="box-title-text">精彩活动</view>
                <view class="more" @click="toActivity">查看更多</view>
            </view>
            <view>
                <swiper class="activity" :autoplay="activities.length > 2" circular :interval="0" :duration="5000">
                    <swiper-item :item-id="item.id" v-for="item in activities" :key="item.id" class="activity-item"
                        :display-multiple-items="2" @click="handleActivity(item)">
                        <view class="activity-panne">
                            <image :src="item.cover"></image>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <view class="box" v-if="vouchers.length">
            <view class="box-title">
                <view class="box-title-text">兑换券</view>
                <view class="more" @click="toVoucher">查看更多</view>
            </view>
            <view class="voucher">
                <view class="info" v-for="info in vouchers" :key="info.id" @click="handleVoucher(info)">
                    <image class="cover" :src="info.cover"></image>
                    <view class="right">
                        <view class="title text-cut">{{info.title}}</view>
                        <view class="intro text-cut-2">{{info.intro}}</view>
                        <view class="price">
                            <text class="original">￥{{info.originalPrice}}</text>
                            <text class="sell">￥{{info.sellPrice}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="box">
            <view class="box-title">
                <view class="box-title-text">历史订单</view>
                <view class="more" @click="toOrder">查看更多</view>
            </view>
            <view class="order">
                <list-empty v-if="!orders.length"></list-empty>
                <view v-else class="list-item" v-for="(item, index) in orders" :key="index" @click="toAdd(item.id)">
                    <view class="left">
                        <view class="station">{{item.stationName}}</view>
                        <view class="codes text-cut-2">{{item.expressCodes}}</view>
                    </view>
                    <view class="right">
                        <view class="pay-status">
                            <text v-if="item.deliveryStatus == 'FINISH'"
                                class="finish">{{item.deliveryStatusName}}</text>
                            <text v-else-if="item.deliveryStatus">{{item.deliveryStatusName}}</text>
                            <text v-else
                                :class="{cancel: item.payStatus == 'CANCELED', paying: item.payStatus != 'PAYED'}">{{item.payStatusName}}</text>
                        </view>
                        <view class="time">{{item.createDate}}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="divide"></view>
        <global-components ref="global-components" :loading="false"></global-components>
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations
    } from 'vuex';
    export default {
        data() {
            return {
                banners: [],
                notices: [],
                noticeTitles: [],
                activities: [],
                orders: [],
                vouchers: [],
            };
        },
        onLoad() {
            this.$api.common.index().then(res => {
                this.banners = res.banners;
                this.notices = res.notices;
                this.noticeTitles = res.notices.map(n => n.title);
                this.activities = res.activities;
                this.vouchers = res.vouchers;
            })
        },
        onShow() {
            this.handleInit();
        },
        computed: {
            ...mapState(['userInfo', 'login', 'school', 'appConfig'])
        },
        watch: {
            login() {
                this.handleInit();
            }
        },
        methods: {
            // 初始化
            handleInit() {
                this.login && this.$api.order.page().then(res => {
                    console.log('orders', res)
                    this.orders = res.list;
                })
            },
            handleAuth() {
                this.$refs['global-components'].showAuth();
            },
            handleNotice(index) {
                this.$toPage({
                    url: '/pages/common/notice/detail',
                    params: {
                        id: this.notices[index].id
                    }
                });
            },
            toAdd(id) {
                if (this.login) {
                    this.$toPage({
                        url: '/pages/main/add?id=' + id
                    });
                } else {
                    this.$refs['global-components'].showAuth();
                }
            },
            toActivity() {
                this.$toPage({
                    url: '/pages/activity/index'
                });
            },
            handleActivity(item) {
                this.$toPage({
                    url: '/pages/activity/detail?id=' + item.id
                });
            },
            toVoucher() {
                this.$toPage({
                    url: '/pages/voucher/index'
                });
            },
            handleVoucher(item) {
                this.$toPage({
                    url: '/pages/voucher/detail?id=' + item.id
                });
            },
            toOrder() {
                if (this.login) {
                    this.$toPage({
                        url: '/pages/main/order'
                    });
                } else {
                    this.$refs['global-components'].showAuth();
                }
            },
            handleBannerClick(banner) {
                if (banner.targetModule == 'XYPS') {
                    this.toAdd('')
                } else if (banner.targetModule == 'ACTIVITY') {
                    if (banner.targetId) {
                        this.handleActivity({
                            id: banner.targetId
                        })
                    } else {
                        this.toActivity();
                    }
                } else if (banner.targetModule == 'VOUCHER') {
                    if (banner.targetId) {
                        this.handleVoucher({
                            id: banner.targetId
                        })
                    } else {
                        this.toVoucher();
                    }
                }
            }
        }
    };
</script>

<style scoped lang="scss">
    .page-wrap {
        min-height: 100vh;

        .box {
            background-color: #fff;
            margin-bottom: 32rpx;

            .box-title {
                margin: 32rpx;
                display: flex;
                align-items: center;

                &::before {
                    display: inline-block;
                    content: ' ';
                    width: 8rpx;
                    height: 1em;
                    background-color: $primary-color;
                    margin-right: 0.5em;
                }

                .box-title-text {
                    flex-grow: 1;
                    font-size: 32rpx;
                    font-weight: bolder;
                    color: #2d2b2b;
                }

                .more {
                    color: #aaaaaa;
                    font-size: 28rpx;
                }
            }
        }

        .divide {
            height: 32rpx;
        }

        .banner {
            height: 350rpx;
            margin-bottom: 32rpx;

            image {
                width: 750rpx;
                height: 350rpx;
                display: block;
            }
        }

        .notice {
            margin-bottom: 16rpx;

            ::v-deep .u-notice-bar {
                .u-icon__icon {
                    color: #117eda !important;
                    font-size: 28rpx !important;
                }

                .u-notice__swiper__item__text {
                    font-size: 28rpx !important;
                    color: #666 !important;
                }

                .uicon-arrow-right {
                    color: #cdcdcd !important;
                }
            }
        }

        .service {
            background-color: #fff;

            image {
                width: 750rpx;
                height: 329rpx;
                display: block;
            }
        }

        .activity {
            height: 240rpx;
            margin-bottom: 32rpx;

            .activity-item {
                width: 500rpx !important;
                padding-left: 32rpx;

                .activity-panne {
                    border-radius: 32rpx;
                    overflow: hidden;

                    image {
                        width: 500rpx;
                        height: 240rpx;
                        display: block;
                    }
                }
            }
        }

        .voucher {
            padding: 0 32rpx;

            .info {
                display: flex;
                margin-bottom: 32rpx;

                &+.info {
                    padding-top: 32rpx;
                    border-top: solid 1rpx #eee;
                }

                .cover {
                    width: 200rpx;
                    height: 128rpx;
                    margin-right: 32rpx;
                }

                .right {
                    flex: 1;
                    min-width: 0;

                    .title {
                        color: #333;
                        font-size: 32rpx;
                        font-weight: bold;
                    }

                    .intro {
                        color: #808080;
                        font-size: 20rpx;
                    }

                    .price {
                        color: #f44336;
                        text-align: right;

                        .original {
                            font-size: 24rpx;
                            text-decoration: line-through;
                        }

                        .sell {
                            font-size: 32rpx;
                        }
                    }
                }
            }
        }

        .order {
            margin: 0 32rpx;
            background-color: #fff;
            border-radius: 32rpx;

            .list-item {
                padding: 32rpx 0;
                border-top: 1rpx solid #eee;
                display: flex;

                .left {
                    flex-grow: 1;
                    width: 1px;

                    .station {
                        font-size: 32rpx;
                        margin-bottom: 12rpx;
                    }

                    .codes {
                        font-size: 28rpx;
                        color: #aaa;
                    }
                }

                .right {
                    flex-shrink: 0;
                    width: 280rpx;
                    text-align: right;

                    .pay-status {
                        color: $primary-color;

                        .finish {
                            color: $success-color;
                        }

                        .paying {
                            color: $error-color;
                        }

                        .cancel {
                            color: $warning-color;
                        }
                    }

                    .time {
                        font-size: 0.8em;
                        opacity: 0.8;
                        padding-top: 15rpx;
                    }
                }
            }
        }
    }
</style>